<template>
  <div>
    <el-dialog
      :title="info.isAdd ? '商品添加' : '商品编辑'"
      :visible.sync="info.isshow"
      @closed="closed"
    >
      <el-form :model="form">
        {{ form }}
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block">
          <span class="demonstration">默认</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-form-item label="一级分类" :label-width="formLabelWidth">
          <el-select
            v-model="form.first_cateid"
            placeholder="请选择"
            @change="reqtwo"
          >
            <el-option label="请选择" value="" disabled></el-option>
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select
            v-model="form.second_cateid"
            placeholder="请选择"
            @change="reqthree"
          >
            <el-option label="请选择" value="" disabled></el-option>
            <el-option
              v-for="item in twolist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select v-model="form.goodsid" placeholder="请选择">
            <el-option label="请选择" value="" disabled></el-option>
            <el-option
              v-for="item in threelist"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-switch
          v-model="form.status"
          inactive-text="状态"
          active-value="1"
          inactive-value="2"
        >
        </el-switch>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add" v-if="info.isadd"
          >确 定</el-button
        >
        <el-button type="primary" @click="amend" v-else>修 改</el-button>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="add" v-if="info.isAdd">添 加</el-button>
        <el-button type="primary" v-else @click="amend">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reqseckadd, reqseckedit, reqseckinfo } from "../../../request/api";
import { mapGetters, mapActions } from "vuex";
import { successAlert, errorAlert } from "../../../utils/alert";
export default {
  props: ["info"],
  mounted() {
    if (this.catelist.length == 0) {
      this.reqcatelist();
    }
    this.reqgoodslist(false);
    this.aclist();
  },
  data() {
    return {
      form: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      formLabelWidth: "120px",
      value1: [],
      //二级
      twolist: [],
      //三级
      threelist: [],
    };
  },
  methods: {
    ...mapActions({
      aclist: "miaosha/reqList",
      reqcatelist: "fenlei/reqList",
      reqgoodslist: "guanli/reqList",
    }),
    //清空输入框
    empty() {
      (this.form = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      }),
        (this.value1 = []),
        //二级
        (this.twolist = []),
        //三级
        (this.threelist = []);
    },
    //点1请2
    reqtwo() {
      this.form.second_cateid = "";
      this.form.goodsid = "";
      this.reqtwo2();
    },
    reqtwo2() {
      let obj = this.catelist.find((item) => item.id == this.form.first_cateid);
      this.twolist = obj ? obj.children : [];
    },
    //点2请3
    reqthree() {
      this.form.goodsid = "";
      this.reqthree2();
    },
    reqthree2() {
      let sx = this.goodslist.filter(
        (item) => item.second_cateid == this.form.second_cateid
      );
      this.threelist = sx;
    },
    quxiao(){
      this.info.isshow=false
    },
    //确定增加
    add() {
      this.form.begintime = new Date(this.value1[0]).getTime();
      this.form.endtime = new Date(this.value1[1]).getTime();
      reqseckadd(this.form).then((res) => {
        if (res.data.code == 200) {
          //弹信息-清空输入框-弹框消失-页面重新渲染(列表重新请求)
          successAlert(res.data.msg);
          this.empty();
          this.info.isshow = false;
          this.aclist();
        }
      });
    },
    //取一条数据的id
    getOne(id) {
      reqseckinfo({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.form = res.data.list;
          this.value1.push(new Date().setTime(this.form.begintime));
          this.value1.push(new Date().setTime(this.form.endtime));
          this.form.id = id;
          this.reqtwo2();
          this.reqthree2();
        }
      });
    },
    //确定修改
    amend() {
      this.form.begintime = new Date(this.value1[0]).getTime();
      this.form.endtime = new Date(this.value1[1]).getTime();
      reqseckedit(this.form).then((res) => {
        //弹信息-清空输入框-弹框消失-页面重新渲染(列表重新请求)
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.empty();
          this.info.isshow = false;
          this.aclist();
        }
      });
    },
    //弹窗关闭时
    closed() {
      if (!this.info.isadd) {
        this.empty();
      }
    },
  },
  computed: {
    ...mapGetters({
      catelist: "fenlei/list",
      goodslist: "guanli/list",
    }),
  },
};
</script>
<style lang="less" scoped>
@import "../../../less/index.less";
.frame {
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  position: relative;
  p {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>